<template>
  <common-page title="注册新账号">
    <el-steps :active="stepActive" finish-status="success" simple>
      <el-step title="基础信息"/>
      <el-step title="详细信息"/>
      <el-step title="完成注册"/>
    </el-steps>
    <el-form v-if="stepActive===0" ref="stepForm_0" :label-width="120" :model="form" :rules="rules">
      <el-form-item label="系统租户" prop="tenantName">
        <el-select v-model="form.tenantName" style="width: 100%;">
          <el-option v-for="item in tenantNameList" :label="item.tenantName" :value="item.tenantName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="登录账号" prop="username">
        <el-input v-model="form.username" placeholder="请输入登录账号"></el-input>
        <div class="el-form-item-msg">登录账号将作为登录时的唯一凭证</div>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input v-model="form.password" placeholder="请输入登录密码" show-password type="password"></el-input>
        <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
      </el-form-item>
      <el-form-item label="确认密码" prop="surePassword">
        <el-input v-model="form.surePassword" placeholder="请再一次输入登录密码" show-password type="password"></el-input>
      </el-form-item>
      <el-form-item label="" prop="agree">
        <el-checkbox v-model="form.agree" label="">已阅读并同意</el-checkbox>
        <span class="link" @click="showAgree=true">《平台服务协议》</span>
      </el-form-item>
    </el-form>
    <el-form v-if="stepActive===1" ref="stepForm_1" :label-width="120" :model="form" :rules="rules">
      <el-form-item label="用户昵称" prop="nickName">
        <el-input v-model="form.nickName" placeholder="请输入用户昵称"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item label="邮箱账号" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱账号"></el-input>
      </el-form-item>
      <el-form-item label="用户性别" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio-button label="0">女</el-radio-button>
          <el-radio-button label="1">男</el-radio-button>
          <el-radio-button label="2">未知</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div v-if="stepActive===2">
      <el-result icon="success" sub-title="可以使用登录账号、邮箱地址以及手机号登录系统" title="注册成功">
        <template #extra>
          <el-button type="primary" @click="goLogin">前去登录</el-button>
        </template>
      </el-result>
    </div>
    <el-form style="text-align: center;">
      <el-button v-if="stepActive>0 && stepActive<2" @click="pre">上一步</el-button>
      <el-button v-if="stepActive<1" type="primary" @click="next">下一步</el-button>
      <el-button v-if="stepActive===1" type="primary" @click="save">提交</el-button>
    </el-form>
    <el-dialog v-model="showAgree" :width="800" destroy-on-close title="平台服务协议">
      平台服务协议
      <template #footer>
        <el-button @click="showAgree=false">取消</el-button>
        <el-button type="primary" @click="showAgree=false;form.agree=true;">我已阅读并同意</el-button>
      </template>
    </el-dialog>
  </common-page>
</template>

<script>
import commonPage from './components/commonPage'

module.exports = {
  components: {
    commonPage
  },
  data() {
    return {
      stepActive: 0,
      showAgree: false,
      form: {
        tenantName: '',
        username: "",
        password: "",
        surePassword: "",
        agree: false,
        nickName: "",
        phone: "",
        email: "",
        sex: "2"
      },
      rules: {
        tenantName: [
          {required: true, message: '请输入系统租户'}
        ],
        username: [
          {required: true, message: '请输入用户账号'}
        ],
        password: [
          {required: true, message: '请输入密码'}
        ],
        surePassword: [
          {required: true, message: '请再次输入密码'},
          {
            validator: (rule, value, callback) => {
              if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致'));
              } else {
                callback();
              }
            }
          }
        ],
        agree: [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error('请阅读并同意协议'));
              } else {
                callback();
              }
            }
          }
        ],
        nickName: [
          {required: true, message: '请输入用户昵称'}
        ],
        phone: [
          {required: true, message: '请输入手机号码'}
        ],
        email: [
          {required: true, message: '请输入邮箱账号'}
        ],
        sex: [
          {required: true, message: '请选择用户性别'}
        ]
      },
      tenantNameList: []
    }
  },
  created() {
    this.$API.tenant.listTenantName.get().then(response => {
      if (response.status) {
        this.tenantNameList = response.data
        if (this.tenantNameList.length !== 0) {
          this.form.tenantName = this.tenantNameList[0].tenantName
        }
      }
    })
  },
  mounted() {

  },
  methods: {
    pre() {
      this.stepActive -= 1
    },
    next() {
      const formName = `stepForm_${this.stepActive}`
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.stepActive += 1
        } else {
          return false
        }
      })
    },
    save() {
      const formName = `stepForm_${this.stepActive}`
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$API.user.userRegister.post({
            tenantName: this.form.tenantName,
            username: this.form.username,
            password: this.$TOOL.crypto.rsaEncrypt(this.form.password),
            surePassword: this.$TOOL.crypto.rsaEncrypt(this.form.surePassword),
            nickName: this.form.nickName,
            phone: this.form.phone,
            email: this.form.email,
            sex: this.form.sex
          }).then(response => {
            if (response.status) {
              this.$message.success(response.msg);
              this.stepActive += 1
            } else {
              this.$alert(response.msg, "提示", {type: 'error'});
            }
          });
        } else {
          return false
        }
      })
    },
    goLogin() {
      this.$router.push({
        path: '/login'
      })
    }
  }
}
</script>

<style scoped>


</style>
